import {Layout, Menu} from "antd";
import ConsoleRoutes from "../../../routes/consoleRoutes";
import {Link} from "react-router-dom";
import {useEffect, useState} from "react";
import {CaretRightOutlined, CaretUpOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import TokenUtils from "../../../utils/tokenUtils";

const AppMenu = (props) => {
    const location = props.location;
    const [selectedKey, setSelectedKey] = useState(location.pathname);
    const [openKeys, setOpenKeys] = useState([]);

    // 监听路由变化更新选中状态
    useEffect(() => {
        setSelectedKey(location.pathname);

        // 自动展开父级菜单
        const currentPath = location.pathname;
        const parentKeys = ConsoleRoutes
            .filter(item => item.isShow && item.children)
            .map(item => item.path)
            .filter(path => currentPath.startsWith(path));

        setOpenKeys(parentKeys);
    }, [location.pathname]);

    // 处理菜单展开/收起
    const onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key => openKeys.indexOf(key) === openKeys.length - 1);
        if (!latestOpenKey) {
            setOpenKeys([]);
            return;
        }

        // 仅展开当前路径的父级菜单
        const parentKeys = ConsoleRoutes
            .filter(item => item.isShow && item.children)
            .map(item => item.path)
            .filter(path => latestOpenKey.startsWith(path));

        setOpenKeys(parentKeys);
    };

    return (
        <div>
            <Layout.Sider
                style={{
                    height: "calc(100vh - 114px)",
                    width: "200px",
                    backgroundColor: "#fafbfc",
                    borderRight: "1px solid #f0f0f0",
                    transition: "all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)",
                    boxShadow: "2px 0 12px rgba(153, 51, 255, 0.05)"
                }}
                trigger={null}
            >
                <div style={{
                    padding: "18px 24px",
                    fontSize: "16px",
                    fontWeight: 600,
                    color: "#6666FF",
                    borderBottom: "1px solid #f0f0f0",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "10px",
                    letterSpacing: "0.5px",
                }}>
                    <MenuUnfoldOutlined style={{
                        fontSize: "18px"
                    }}/>
                    功能菜单
                </div>

                <Menu
                    mode="inline"
                    selectedKeys={[selectedKey]}
                    openKeys={openKeys}
                    onOpenChange={onOpenChange}
                    style={{
                        borderRight: "none",
                        backgroundColor: "transparent",
                        fontSize: "14px",
                        marginTop: "8px"
                    }}
                    itemStyle={{
                        height: "52px",
                        lineHeight: "52px",
                        margin: "4px 12px",
                        borderRadius: "8px",
                        color: "#4E5969",
                        transition: "all 0.25s ease",
                        paddingLeft: "0",
                        textAlign: "center"
                    }}
                    selectedItemStyle={{
                        backgroundColor: "#f0f2ff",
                        color: "#6666FF",
                        fontWeight: 500,
                        boxShadow: "0 2px 8px rgba(102, 102, 255, 0.15)",
                        transform: "translateX(2px)"
                    }}
                    itemHoverStyle={{
                        backgroundColor: "#f5f7fa",
                        color: "#6666FF",
                        transform: "translateX(1px)"
                    }}
                    expandIcon={({isOpen}) => (
                        <span style={{
                            fontSize: "14px",
                            transition: "transform 0.2s ease",
                            transform: isOpen ? "rotate(180deg)" : "rotate(0)",
                            color: isOpen ? "#6666FF" : "#86909C"
                        }}>
                            {isOpen ? <CaretUpOutlined/> : <CaretRightOutlined/>}
                        </span>
                    )}
                >
                    {ConsoleRoutes
                        .filter(item => item.isShow)
                        .filter(item => item.pageCode === undefined ||
                            TokenUtils.getCurrentPagePermissionCodes().includes(item.pageCode))
                        .map(item => {
                            // 处理有子菜单的项
                            if (item.children && item.children.length > 0) {
                                return (
                                    <Menu.SubMenu
                                        key={item.path}
                                        title={
                                            <span style={{
                                                display: "flex",
                                                alignItems: "center",
                                                justifyContent: "space-between",
                                                width: "100%"
                                            }}>
                                            <span style={{display: "flex", alignItems: "center"}}>
                                                {item.icon}
                                                <span style={{marginLeft: 9, color: '#4E5969'}}>{item.title}</span>
                                            </span>
                                        </span>
                                        }
                                    >
                                        {item.children
                                            .filter(child => child.isShow)
                                            .filter(child => child.pageCode === undefined ||
                                                TokenUtils.getCurrentPagePermissionCodes().includes(child.pageCode))
                                            .map(child => (
                                                <Menu.Item
                                                    key={child.path}
                                                    style={{
                                                        paddingLeft: "36px", // 更大的缩进，文字更靠右
                                                        fontSize: "14px",
                                                    }}
                                                >
                                                    <Link
                                                        to={child.path}
                                                        style={{
                                                            textDecoration: "none",
                                                            display: "block",
                                                            width: "100%",
                                                            fontWeight: selectedKey === child.path ? 600 : 400,
                                                            color: selectedKey === child.path ? "#6666FF" : "#4E5969" // 确保颜色正确
                                                        }}
                                                    >
                                                        <span style={{marginLeft: '18px'}}>{child.title}</span>
                                                    </Link>
                                                </Menu.Item>
                                            ))}
                                    </Menu.SubMenu>
                                );
                            }

                            // 处理普通菜单项
                            return (
                                <Menu.Item
                                    key={item.path}
                                    icon={item.icon}
                                >
                                    <Link
                                        to={item.path}
                                        style={{
                                            textDecoration: "none",
                                            display: "block",
                                            width: "100%",
                                            fontWeight: selectedKey === item.path ? 600 : 400,
                                            color: selectedKey === item.path ? "#6666FF" : "#4E5969"
                                        }}
                                    >
                                        {item.title}
                                    </Link>
                                </Menu.Item>
                            );
                        })}
                </Menu>
            </Layout.Sider>
        </div>
    )
}

export default AppMenu;